<template>
	<view class="container">
		<u-sticky offset-top="200">
			<div class="header ">
				<div class="cart_del">
					<div class="cart">购物车</div>
					<span class="del">删除</span>
				</div>
				<div class="coupons" >
					<span>领券</span>
					<scroll-view scroll-x="true" enable-flex="true" class="scroll">
						<div class="couponCard">满99.00减10</div>
						<div class="couponCard">满79.00减8</div>
						<div class="couponCard">满69.00减6</div>
						<div class="couponCard">满59.00减5</div>
					</scroll-view>
					<span class="more">></span>
				</div>
			</div>
		</u-sticky>
		<view class="null">
			<image src="../../static/img/cart.jpg" style="width: 400rpx;height: 280rpx;"></image>
			<span class="nullText">购物车还是空的</span>
			<u-button type="success" size="medium" ripple="true" @click="toIndex">去逛逛</u-button>
		</view>
		<view class="carGoods">
			<div class="carGood">
				<radio></radio>
				<image style="width: 200rpx;height: 200rpx;" src="../../static/image/category/00-07-60.jpg"></image>
				<div class="goodMessage">
					<span>芒果500g</span>
					<div class="price">
						<span class="red">¥10.99</span>
						<span class="grey">/份</span>
						<span class="oldPrice">¥15.99</span>
					</div>
				</div>
				<div class="addOrdel">
					<span>-</span>
					<input value="1" />
					<span>+</span>
				</div>
			</div>
			<div class="carGood">
				<radio></radio>
				<image style="width: 200rpx;height: 200rpx;" src="../../static/image/category/00-07-60.jpg"></image>
				<div class="goodMessage">
					<span>芒果500g</span>
					<div class="price">
						<span class="red">¥10.99</span>
						<span class="grey">/份</span>
						<span class="oldPrice">¥15.99</span>
					</div>
				</div>
				<div class="addOrdel">
					<span>-</span>
					<input value="1" />
					<span>+</span>
				</div>
			</div>
			<div class="carGood">
				<radio></radio>
				<image style="width: 200rpx;height: 200rpx;" src="../../static/image/category/00-07-60.jpg"></image>
				<div class="goodMessage">
					<span>芒果500g</span>
					<div class="price">
						<span class="red">¥10.99</span>
						<span class="grey">/份</span>
						<span class="oldPrice">¥15.99</span>
					</div>
				</div>
				<div class="addOrdel">
					<span>-</span>
					<input value="1" />
					<span>+</span>
				</div>
			</div>
			<div class="carGood">
				<radio></radio>
				<image style="width: 200rpx;height: 200rpx;" src="../../static/image/category/00-07-60.jpg"></image>
				<div class="goodMessage">
					<span>芒果500g</span>
					<div class="price">
						<span class="red">¥10.99</span>
						<span class="grey">/份</span>
						<span class="oldPrice">¥15.99</span>
					</div>
				</div>
				<div class="addOrdel">
					<span>-</span>
					<input value="1" />
					<span>+</span>
				</div>
			</div>
		</view>
		<guessLike></guessLike>
		<view class="settlement">
			<label class="radio"><radio value="r1" checked="true" style="transform:scale(0.6)"/>全选</label>
			<div class="goSettlement">
				<div class="price">
					<div class="totalPrice">
						<span class="total">合计</span>
						<span class="red">¥29.90</span>
					</div>
					<div class="shipping_fee">
						<span class="text">配送费</span>
						<span class="red">¥0.00</span>
					</div>
				</div>
				<u-button size="medium" type="error" style="color: #fff;" shape="circle" @click="toOrder">去结算(1)</u-button>
			</div>
		</view>
	</view>
</template>

<script>
	import guessLike from '../../components/guessLike.vue'
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toIndex(){
				uni.switchTab({
					url:'../index/index',
				})
			},
			toOrder(){
				uni.navigateTo({
					url:'../order/order'
				})
			}
		},
		components:{
			"guessLike":guessLike
		}
	}
</script>

<style lang="scss">
.container{
	width: 100%;
	background-color: #fafafa;
	.header{
		box-sizing: border-box;
		padding-top: 50rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		width: 100%;
		height: 150rpx;
		background:#fff;
		padding-bottom: 20rpx;
		.cart_del{
			width: 100%;
			display: flex;
			justify-content: space-between;
			.cart{
				font-size: 40rpx;
			}
			.del{
				font-size: 32rpx;
				color: #8F8F94;
			}
		}
		.coupons{
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			height: 50rpx;
			.coupons>span{
				font-size: 32rpx;
				margin-top: 10rpx;
				width: 40rpx;
			}
			.scroll{
				display: flex;
				height: 60rpx;
				width: 600rpx;
				margin-left: 10rpx;
				.couponCard{
					margin-right: 10rpx;
					width: 150rpx;
					background-color: #ECF5FF;
					border: 1px #A0CFFF solid;
					font-size: 24rpx;
					height: 35rpx;
					line-height: 35rpx;
					border-radius: 10rpx;
					margin-top: 15rpx;
				}
			}
			.more{
				color: #8F8F94;
			}
		}
	}
	.carGoods{
		margin-top: 20rpx;
		background-color: #fff;
		padding-left: 20rpx;
		.carGood{
			display: flex;
			align-items: center;
			height: 200rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #ECF5FF;
			.goodMessage{
				height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				&>span{
					font-size: 32rpx;
				}
				.price .red{
					color: red;
					font-size: 28rpx;
				}
				.price .grey{
					font-size: 28rpx;
					color: #C0C0C0;
				}
				.price .oldPrice{
					font-size: 28rpx;
					color: #C0C0C0;
					margin-left: 10rpx;
				    text-decoration: line-through;
				}
			}
			.addOrdel{
				display: flex;
				align-items: center;
				margin-left: 60rpx;
				margin-top: 60px;
				span{
					width: 40rpx;
					height: 40rpx;
					line-height: 30rpx;
					text-align: center;
				}
				input{
					width: 60rpx;
					height: 30rpx;
					background: #ECF5FF;
					margin: 0 20rpx;
					text-align: center;
					font-size: 32rpx;
				}
			}
		}
	}
	.null{
		width: 100%;
		background-color: #fff;
		height: 700rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		.nullText{
			color: #c0c0c0;
		}
	}
	.settlement{
		background: #fff;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 2;
		.radio{
			font-size: 32rpx;
			color: #333;
		}
		.goSettlement{
			display: flex;
			align-items: center;
			.price{
				margin-right: 10rpx;
				.totalPrice{
					.total{
						font-size: 34rpx;
					}
					.red{
						font-weight: bold;
						font-size: 38rpx;
						color: red;
						margin-left: 20rpx;
					}
				}
				.shipping_fee{
					.text{
						font-size: 32rpx;
						color: #333;
					}
					.red{
						font-size: 32rpx;
						color: red;
					}
				}
			}
		}
	}
}







</style>
